<template>
  <div class="index-wrap">
    <div class="footer-box">
      <div class="content-box" v-for="(item,index)  in itemList" :key="index" @click="toPage(item.push,item.name)">
        <img :src="isSelect===item.name?item.iconSelect:item.icon" class="back" :class="item.cls" onclick="return false"/>
        <div class="title" :class="{'active':isSelect === item.name}">{{item.name}}</div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isSelect: "",
        itemList: [
          {
            cls: "job",
            name: "招工",
            push: "/recruitlist",
            icon: require('./job.png'),
            iconSelect: require('./joblight.png')
          },
          {
            cls: "salary",
            name: "工资",
            push: "/salary",
            icon: require('./salary.png'),
            iconSelect: require('./salarylight.png')
          },
          {
            cls: "entry",
            name: "入职",
            push: "/entry",
            icon: require('./entry.png'),
            iconSelect: require('./entrylight.png')
          },
          {
            cls: "my",
            name: "我的",
            push: "/mine",
            icon: require('./my.png'),
            iconSelect: require('./mylight.png')
          }
        ]
      }
    },
    mounted() {
      this.isSelect = this.$route.name;
      window.addEventListener('popstate', (event) => {//监听微信浏览器
        let hash = event.currentTarget.location.hash;
        if (hash === "/recruitlist") {
          this.isSelect = "招工";
        } else if (hash === "/salary") {
          this.isSelect = "工资";
        } else if (hash === "/entry") {
          this.isSelect = "入职";
        } else if (hash === "/mine") {
          this.isSelect = "我的";
        }
      });
    },
    methods: {
      toPage(page, name) {//跳转页面
        this.isSelect = name;
        this.$router.push({path: page});
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .index-wrap
    width: 100%
    height: 100%
    overflow: hidden
    .footer-box
      position: fixed
      bottom: 0
      display: flex
      width: 100%
      height: 1.307rem
      background: rgba(255, 255, 255, 1)
      box-shadow: 0rem -0.027rem 0.067rem 0rem rgba(144, 144, 144, 0.22)
      z-index: 100
      .content-box
        display: flex
        justify-content: center
        align-items: center
        flex-direction: column
        flex: 1
        .job
          width: 0.6rem
          height: 0.6rem
        .salary
          width: 0.547rem
          height: 0.573rem
        .entry
          width: 0.533rem
          height: 0.56rem
        .my
          width: 0.52rem
          height: 0.6rem
        .title
          margin-top: 0.08rem
          font-size: 0.32rem
          color: rgba(68, 68, 68, 1)
        .back
          margin-bottom: 0.08rem
        .active
          color: rgba(60, 175, 255, 1)
</style>
